<template>
	<view class="countdown_con flex flex-ai-center flex-js-center">
		<text>活动倒计时：</text>
		<u-count-down
			:time="time"
			format="DD:HH:mm:ss"
			autoStart
			millisecond
			@change="onChange"
		>
			<view class="time">
				<text class="time__item">{{ timeData.days >= 10 ? timeData.days : '0' + timeData.days }}天</text>
				<text class="time__item">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}时</text>
				<text class="time__item">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}分</text>
				<text class="time__item">{{ timeData.seconds >= 10 ? timeData.seconds : '0' + timeData.seconds }}秒</text>
			</view>
		</u-count-down>
	</view>
</template>

<script>
	export default {
		props:{
			time:{
				type:String | Number,
				default:''
			}
		},
		data() {
			return {
				timeData:0
			};
		},
		methods:{
			onChange(e) {
				this.timeData = e
			}
		}
	}
</script>

<style lang="scss" scoped>
	.countdown_con{
		// width: calc(100% - 20rpx);
		// height: 214rpx;
		// background-image: url( $IMG_URL + '/static/cj/bg5.png');
		// background-size: 100% 100%;
		// position: absolute;
		// left: 10rpx;
		// top: 60%;
		// transform: translateY(-50%);
		// z-index: 11;
		>text {
			color:#fff;
			font-size: 40rpx;
			margin-top: 8rpx;
		}
		.time__item{
			font-size: 40rpx;
			color: #fff;
		}
	}
</style>
